<template>
  <div class="image-container">
    <img 
      :src="currentImagePath" 
      alt="Dynamic Image"
      class="transition-image"
    />
    <p>图片将在{{ countdown }}秒后自动切换</p>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    const imageList = [
      new URL("../assets/1.png", import.meta.url).href,
      new URL("../assets/2.png", import.meta.url).href,
      new URL("../assets/3.jpg", import.meta.url).href
    ]
    
    const currentIndex = ref(0)
    const countdown = ref(5)
    let timer = null

    const currentImagePath = ref(imageList[currentIndex.value])

    const switchImage = () => {
      currentIndex.value = (currentIndex.value + 1) % imageList.length
      currentImagePath.value = imageList[currentIndex.value]
      countdown.value = 5
    }

    onMounted(() => {
      timer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
          switchImage()
        }
      }, 1000)
    })

    onBeforeUnmount(() => {
      clearInterval(timer)
    })

    return {
      currentImagePath,
      countdown
    }
  }
}
</script>

<style scoped>
.image-container {
  text-align: center;
  padding: 20px;
}

.transition-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: opacity 0.5s ease;
}

.transition-image:hover {
  opacity: 0.9;
}
</style>